<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bookmarks</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="http://localhost:8000/static/bootstrap.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>		
	<script type="text/javascript">


	var counter = 0
	function checkSelected(id) 
		{
			counter=1;
			$('#bookmark').hide();
					
		}
	function checkBookMarked(){
			if(counter == 0) 
			{
					$('#bookmark').show();				
					return false;
				}
				else{
				 return true;
				}
			
			}
	</script>
	    <script type="text/javascript">
        var pager = new Pager('results', 4);
        pager.init();
        pager.showPageNav('pager', 'pageNavPosition');
        pager.showPage(1);
    </script>
  <head>
  <!--  Author : Fouad Hesham Said This function is for pagination-->
        <style type="text/css">   
            .pg-normal {
                color: black;
                font-weight: normal;
                text-decoration: none;   
                cursor: pointer;   
            }
            .pg-selected {
                color: black;
                font-weight: bold;       
                text-decoration: underline;
                cursor: pointer;
            }
        </style>             
        <script type="text/javascript">
        function Pager(tableName, itemsPerPage) {
            this.tableName = tableName;
            this.itemsPerPage = itemsPerPage;
            this.currentPage = 1;
            this.pages = 0;
            this.inited = false;
           
            this.showRecords = function(from, to) {       
                var rows = document.getElementById(tableName).rows;
                // i starts from 1 to skip table header row
                for (var i = 1; i < rows.length; i++) {
                    if (i < from || i > to) 
                        rows[i].style.display = 'none';
                    else
                        rows[i].style.display = '';
                }
            }
           
            this.showPage = function(pageNumber) {
             if (! this.inited) {
              alert("not inited");
              return;
             }

                var oldPageAnchor = document.getElementById('pg'+this.currentPage);
                oldPageAnchor.className = 'pg-normal';
               
                this.currentPage = pageNumber;
                var newPageAnchor = document.getElementById('pg'+this.currentPage);
                newPageAnchor.className = 'pg-selected';
               
                var from = (pageNumber - 1) * itemsPerPage + 1;
                var to = from + itemsPerPage - 1;
                this.showRecords(from, to);
            }  
           
            this.prev = function() {
                if (this.currentPage > 1)
                    this.showPage(this.currentPage - 1);
            }
           
            this.next = function() {
                if (this.currentPage < this.pages) {
                    this.showPage(this.currentPage + 1);
                }
            }                       
           
            this.init = function() {
                var rows = document.getElementById(tableName).rows;
                var records = (rows.length - 1);
                this.pages = Math.ceil(records / itemsPerPage);
                this.inited = true;
            }

            this.showPageNav = function(pagerName, positionId) {
             if (! this.inited) {
              alert("not inited");
              return;
             }
             var element = document.getElementById(positionId);
             
             var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> &#171 Prev </span> | ';
                for (var page = 1; page <= this.pages; page++)
                    pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
                pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next &#187;</span>';           
               
                element.innerHTML = pagerHtml;
            }
        }
        </script>
</head>

 <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <ul class="nav">

          <a class="brand" href="/homePage/">Eventati</a>
          <li><a href ="/DashboardHome/">Home Page</a></li>      
          <li > <a href="/AboutUs/">About Us</a></li>
          <li><a href="/ViewInstructions/">Instructions</a></li>
          <li><a href  ="/Terms&Conditions/">  Terms & Conditions</a></li>
         <li><a href  ="/News/">  Latest News and Updates</a></li>
         <li><a href ="/Faqs/"> FAQS</a></li>
         <li><a href ="/Contactus/"> Contactus</a></li>
		<!-- Author: Amina Kadry This form is for logging the user out of his account -->
         <li><a href="/logout/" method="POST">Log out</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
<!--  Author : Fouad Hesham Said This part is creating the table with all events that the user can check to bookmark 
and if he checks the events they are added to his bookmarked events -->
		
					<h2> Bookmarked Events</h2>
					{%if flagEventsExist%}
					<font color="red"><p>{{noBookmarks}}</p></font>
							
						<form name="input" action = "/addBookmark/" method = "POST">
					    <TABLE id="results" width="350px" border="1">
					        <tr>
								<th></th>			
								<th> Event Name</th>
								

						</tr>
					{% for p in public %}
							<tr>
								<TD> <INPUT type = "checkbox" name="events" value="{{ c.id }}" onclick = "checkSelected('{{ c.id }}')" ></TD>
								<TD> <OUTPUT type = "text" /> {{p.template.eventName}} </TD>
							<tr/>
					{% endfor %}
					{% for c in createdPrivateEvents %}
							<tr>
								<TD> <INPUT type = "checkbox" name="events" value="{{ c.id }}" onclick = "checkSelected('{{ c.id }}')" ></TD>
								<TD> <OUTPUT type = "text" /> {{c.template.eventName}} </TD>
							<tr/>
					{% endfor %}

					{% for i in invitedEvents %}
							<tr>
								<TD> <INPUT type = "checkbox" name="events" value="{{ i.event.id }}" onclick = "checkSelected('{{ i.event.id }}')" ></TD>
								<TD> <OUTPUT type = "text" /> {{i.event.template.eventName}} </TD>
							<tr/>
					{% endfor %}


					    </TABLE>
					     <div id="pageNavPosition"></div>
					     <INPUT type="submit" value="add" onclick="return checkBookMarked();"/>
       
    </form>
	{%else%}
	<h2><font color="RED"><p>There are no Events</p></font></h2>
   	{% endif %}


	<div id="bookmark" style="display:none;"> <font color="red"> You haven't checked any event to bookmark </font></div>

					

      
      </div>
 {% if afterBookmarking%}
<h4><font color="GREEN"><p>You have successfully bookmarked the following event(s):</p></font></h4>
{% for a in afterBookmarking%}
<h4><font color="GREEN"><p>{{a.event.template.eventName}}<p></font></h4>
{% endfor %}
{% endif %}
      </div>   
      </div>

      <hr>

      <footer>
      <p class="pull-center">
		 <a href="/AboutUs/">About Us</a>
				<a href="/ViewInstructions/">Instructions</a>
				<a href  ="/Terms&Conditions/">  Terms & Conditions</a>
				<a href  ="/News/">  Latest News and Updates</a>
				<a href ="/Faqs/"> FAQS</a>
				<a href ="/Contactus/"> Contactus</a>
				<p class="pull-right"><a href="#">Back to top</a></p>

				        <p>&copy; Company 2012</p>      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>